<!--社区列表-->
<template>
    <div>
            <el-row :gutter="10" style="margin-top:10px;">
               <el-col v-if="localshowCId" :span='5'>
                  <el-select v-model="c_id" placeholder="所属社区" clearable>
                      <el-option
                              v-for="item in allcommunitylist"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                      </el-option>
                  </el-select>
                </el-col>
                <el-col :span='5'>
                     <el-select v-model="age_type" placeholder="年龄段" clearable>
                         <el-option
                                 v-for="item in allagetype"
                                 :key="item.value"
                                 :label="item.label"
                                 :value="item.value">
                         </el-option>
                     </el-select>
                </el-col>
                <el-col :span='5'>
                   <el-select v-model="nation" placeholder="民族" clearable>
                       <el-option
                               v-for="(item,index) in allnations"
                               :key="index"
                               :label="item"
                               :value="index">
                       </el-option>
                   </el-select>
                </el-col>
                <el-col :span='5'>
                   <el-select v-model="educational" placeholder="学历" clearable>
                       <el-option
                               v-for="item in alleducational"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                       </el-option>
                   </el-select>
                </el-col>
            </el-row>

            <el-row :gutter="10" style="margin-top:10px;">
              <el-col :span='5'>
                 <el-input v-model="name">
                   <template slot="prepend">姓名</template>
                 </el-input>
              </el-col>
              <el-col :span='5'>
                <el-input v-model="work_company">
                  <template slot="prepend">工作单位</template>
                </el-input>
              </el-col>
              <el-col :span='5'>
                <el-input v-model="id_card">
                  <template slot="prepend">身份证号</template>
                </el-input>
              </el-col>
              <el-col :span='5'>
                <el-input v-model="current_live_address">
                  <template slot="prepend">详细地址</template>
                </el-input>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="margin-top:10px;">
               <el-col :span='5'>
                    <el-select v-model="politics_face" placeholder="政治面貌" clearable>
                        <el-option
                                v-for="item in allpoliticsface"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
               </el-col>
               <el-col :span='5'>
                  <el-select v-model="special_type" placeholder="是否特殊人群" clearable>
                      <el-option
                              v-for="item in allspecialtype"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                      </el-option>
                  </el-select>
               </el-col>
               <el-col :span='5'>
                    <el-select v-model="person_type" placeholder="人员类别" clearable>
                        <el-option
                                v-for="item in allpersontype"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
               </el-col>
               <el-col :span='5'>
                    <el-select v-model="has_house" placeholder="有无房" clearable>
                        <el-option label="无" value="0"></el-option>
                        <el-option label="有" value="1"></el-option>
                    </el-select>
               </el-col>
            </el-row>
            <el-row :gutter="10" style="margin-top:10px;">
              <el-col :span='5'>
                   <el-select v-model="family_relation" placeholder="家庭关系" clearable>
                       <el-option
                               v-for="item in allfamilyrelations"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                       </el-option>
                   </el-select>
              </el-col>
              <el-col :span='5'>
                   <el-select v-model="manage_type" placeholder="管理类型" clearable>
                       <el-option
                               v-for="item in allmanagetype"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                       </el-option>
                   </el-select>
              </el-col>
              <el-col :span='5'>
                   <el-select v-model="marry_remark" placeholder="婚姻状况" clearable>
                       <el-option
                               v-for="item in allmarryremark"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                       </el-option>
                   </el-select>
              </el-col>
              <el-col :span='5'>
                   <el-select v-model="religion_belief" placeholder="宗教信仰" clearable>
                       <el-option
                               v-for="item in allreligionbelief"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                       </el-option>
                   </el-select>
              </el-col>
            </el-row>
            <el-row class="yx_el_row">
                <el-col>
                    <el-button type="success" plain @click="search">筛选</el-button>
                    <el-button type="primary" plain @click="edit(-1,1)">添加</el-button>
                    <el-button type="primary" plain :loading="excel_loading" @click="exportExcel">{{excel_button_name}}</el-button>
                    <el-upload
                      class="upload-demo"
                      action=""
                      :http-request="handleUpload"
                      accept=".xls,.xlsx,.csv"
                      multiple
                      :limit="1"
                      :on-exceed="handleExceed"
                      :file-list="fileList">
                      <el-button  type="primary" plain :loading="import_loading">{{import_button_name}}</el-button>
                      <div slot="tip" class="el-upload__tip">只能导入csv格式，并且单次导入的记录条数不超过5000条</div>
                    </el-upload>
                </el-col>
            </el-row>
            <el-table class="yx_table" border :data="personlist">
                <el-table-column prop="index" label="序号" width="100">
                </el-table-column>
                <el-table-column prop="c_name" label="所属社区" width="100">
                </el-table-column>
                <el-table-column prop="g_name" label="所属网格" width="100">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="80">
                </el-table-column>
                <el-table-column prop="gender" label="性别" width="50">
                </el-table-column>
                <el-table-column prop="birth_day" label="出生日期" width="100">
                </el-table-column>
                <el-table-column prop="nation" label="民族" width="50">
                </el-table-column>
                <el-table-column prop="educational" label="学历" width="80">
                </el-table-column>
                <el-table-column prop="family_relation" label="与户主关系" width="100">
                </el-table-column>
                <el-table-column prop="id_card" label="身份证号" width="100">
                </el-table-column>
                <el-table-column prop="current_live_address" label="详细地址" width="100">
                </el-table-column>
                <el-table-column prop="person_type" label="人员类别" width="100">
                </el-table-column>
                <el-table-column prop="manage_type" label="管理类型" width="100">
                </el-table-column>
                <el-table-column prop="marry_remark" label="婚姻状况" width="100">
                </el-table-column>
                <el-table-column prop="politics_face" label="政治面貌" width="100">
                </el-table-column>
                <el-table-column prop="religion_belief" label="宗教信仰" width="100">
                </el-table-column>
                <el-table-column prop="contact_tel" label="联系方式" width="100">
                </el-table-column>
                <el-table-column prop="work_company" label="工作单位" width="100">
                </el-table-column>
                <el-table-column prop="has_house" label="有无房" width="100">
                </el-table-column>
                <el-table-column prop="special_type" label="特殊人群" width="80">
                </el-table-column>
                <el-table-column  label="操作" width="180">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="编辑" placement="bottom-start">
                            <el-button type="primary" icon="el-icon-edit" @click="edit(scope.row.id,2)" circle></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="查看" placement="bottom-start">
                            <el-button type="info" icon="el-icon-notebook-1" @click="edit(scope.row.id,0)" circle></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除" placement="bottom-start">
                            <el-button type="warning" icon="el-icon-delete" @click="del(scope.row.id)" circle></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination :total_count="total_count" :getList="getList"></Pagination>
    </div>
</template>

<script>
    import UploadAPI from '../../api/upload.js';
    import Pagination from '@/components/Pagination.vue';
    import { getPersonList,delPerson,getAllNations } from '@/api/person.js';
    import { getAllCommunityList } from '@/api/community.js';
    import { getAllPersonType } from '@/api/persontype.js'
    import { uploadExcel } from '@/api/upload.js';
    export default {
        name: 'PersonList',
        inject:['basic_data_reload'],
        components:{Pagination},
        data() {
            return {
                personlist:[],
                total_count:0,
                persontype:this.$store.getters.getPersonType,
                name:'',
                work_company:'',
                educational:'',
                current_live_address:'',
                politics_face:'',
                special_type:'',
                person_type:'',
                has_house:'',
                family_relation:'',
                id_card:'',
                age_type:'',
                manage_type:'',
                marry_remark:'',
                religion_belief:'',
                nation:'',
                c_id:'',
                allspecialtype:this.$store.getters.getSpecialType,
                allpoliticsface:this.$store.getters.getAllPoliticsFace,
                alleducational:this.$store.getters.getAllEducational,
                //查询条件
                allfamilyrelations:this.$store.getters.getFamilyRelations,
                allagetype:this.$store.getters.getAllAgeType,
                allmanagetype:this.$store.getters.getAllManageType,
                allmarryremark:this.$store.getters.getAllMarryRemark,
                allreligionbelief:this.$store.getters.getAllReligionBelief,
                localshowCId:this.$store.getters.getLoginIsGrid==0?true:false,
                excel_button_name:'导出Excel',
                import_button_name:'批量导入',
                import_loading:false,
                excel_loading:false,
                fileList: [],
                allcommunitylist:[],
                allnations:[],
                allpersontype:[]
            }
        },
        methods: {
            getList(current_page,page_size){
                var send_data={
                    api_token:this.$store.getters.getSessionId,
                    c_id:this.c_id==''?-1:this.c_id,
                    g_id:this.$store.getters.getCurrentGId,
                    name:this.name,
                    work_company:this.work_company,
                    educational:this.educational,
                    current_live_address:this.current_live_address,
                    politics_face:this.politics_face,
                    special_type:this.special_type,
                    person_type:this.person_type,
                    has_house:this.has_house,
                    family_relation:this.family_relation,
                    id_card:this.id_card,
                    age_type:this.age_type,
                    manage_type:this.manage_type,
                    marry_remark:this.marry_remark,
                    religion_belief:this.religion_belief,
                    nation:this.nation,
                    current_page:current_page,
                    page_size:page_size,
                    type:'list'
                }
                let that=this;
                getPersonList(send_data).then(function(response){
                   if(response.data.code==1){
                     that.personlist=response.data.list;
                     that.total_count=response.data.total_count;
                   }
                })
            },
            search(){
                this.getList(1,this.$store.state.default_page_size);
            },
            edit(id,edit_type){
                this.$router.push({
                    name:'personedit',
                    params:{id:id,edit_type:edit_type}
                });
            },
            del(id){
                let that=this;
                //弹框提示
                this.$confirm('确认删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then((e) => {
                    var send_data={
                        api_token : that.$store.getters.getSessionId,
                        id:id
                    };
                    delPerson(send_data).then(function(response){
                        let type=response.data.code==1?'success':'error';
                        let msg=response.data.code==1?'删除成功':'删除失败'
                        that.$message({
                            message:msg,
                            duration:1200,
                            type:type,
                            onClose:function(e){
                                that.basic_data_reload();
                            }
                        });
                    })
                })
            },
            formatJson(filterVal, jsonData) {
                 return jsonData.map(v => filterVal.map(j => v[j]));
            },
            //导出excel
            exportExcel(){
               this.excel_loading=true;
               this.excel_button_name='正在导出';
               var send_data={
                   api_token:this.$store.getters.getSessionId,
                   c_id:this.c_id==''?-1:this.c_id,
                   g_id:this.$store.getters.getCurrentGId,
                   name:this.name,
                   work_company:this.work_company,
                   educational:this.educational,
                   current_live_address:this.current_live_address,
                   politics_face:this.politics_face,
                   special_type:this.special_type,
                   person_type:this.person_type,
                   has_house:this.has_house,
                   family_relation:this.family_relation,
                   id_card:this.id_card,
                   age_type:this.age_type,
                   manage_type:this.manage_type,
                   marry_remark:this.marry_remark,
                   religion_belief:this.religion_belief,
                   nation:this.nation,
                   type:'excel'
               }
               let that=this;
               getPersonList(send_data).then(function(response){
                  if(response.data.code==1){
                    let val=response.data.list;
                    if(val.length>0){
                        const { export_json_to_excel } = require('../../api/excel/export2excel.js');
                        const tHeader = ["序号","所属社区","所属网格","姓名","性别","出生日期","民族","学历","与户主关系","身份证号","详细地址","人员类别","管理类型","婚姻状况","政治面貌","宗教信仰","联系方式","工作单位","有无房","特殊人群"];
                        const fields = ["index","c_name","g_name","name","gender","birth_day","nation","educational","family_relation","id_card","current_live_address","person_type","manage_type","marry_remark","politics_face","religion_belief","contact_tel","work_company","has_house","special_type"];
                        const list=val;
                        const data=that.formatJson(fields,list);
                        let date=new Date();
                        let now_date=date.getFullYear().toString()+(date.getMonth()+1).toString()+date.getDate().toString();
                        export_json_to_excel(tHeader,data,"人员信息-"+now_date);
                    }else{
                        that.$message({
                            message:'没有可导出数据',
                            type:'warning',
                            duration:1000,
                        });
                    }
                    that.excel_loading=false;
                    that.excel_button_name='导出Excel';
                  }
               })
            },
            //超出时限制
            handleExceed(files, fileList) {
              this.$message.warning(`当前有正在导入的Excel,请等待`);
            },
            handleUpload(file){
               this.import_button_name='正在导入，请稍候';
               this.import_loading=true;
               let that=this;
               let fd=new FormData();
               fd.append('excel',file.file);
               fd.append('api_token',this.$store.getters.getSessionId);
               fd.append('type','person');
               uploadExcel(fd).then(function(response){
                  that.fileList=[];
                  if(response.data.code==1){
                      that.$message.success('数据导入成功');
                      that.import_button_name='批量导入';
                      that.import_loading=false;
                      that.basic_data_reload();
                  }else{
                      that.$message.error(response.data.msg);
                  }
                  that.import_button_name='批量导入';
                  that.import_loading=false;
               }).catch(function(e){
                    that.fileList=[];
                    that.import_button_name='批量导入';
                    that.import_loading=false;
                    that.$message.error('批量导入失败，请联系管理员');
               })
            },
            download(){
                window.open('https://retire.wshoto.com/uploads/用户信息导入模板.xlsx');
            }
        },
        created() {
            let send_data={
               api_token:this.$store.getters.getSessionId
            };
            let that=this;
            getAllCommunityList(send_data).then(function(response){
                that.allcommunitylist=response.data.list;
            })
            getAllNations(send_data).then(function(response){
               that.allnations=response.data.list;
            })
            getAllPersonType(send_data).then(function(response){
               that.allpersontype=response.data.list;
            })
            this.getList(1,this.$store.state.default_page_size);
        },
        computed:{
            showCId(){
                return this.$store.getters.getShowCId;
            }
        },
        watch:{
            '$route'(to,from){
                this.current_page=1;
                this.$store.commit('setCurrentGId',to.query.g_id);
                this.getList();
            },
            showCId(val){
                this.localshowCId=val;
            }
        }
    }
</script>

<style>
     @import url('../../assets/css/table.css');
     .yx_el_row .upload-demo{
       display:inline-block;
       margin-left:10px;
     }

     .yx_el_row .el-upload__tip{
       display:inline-block;
       margin-left: 8px;
     }
</style>
